<template>
    <div class="age-structure-panel">
        <div class="age-stats">
            <div class="age-item">
                <div class="age-label">平均年龄</div>
                <div class="age-value">
                    <VueCountUp :end-val="37.5" :decimal-places="1" :duration="2">
                        <template #suffix>
                            <span style="font-size: 14px;color:#2a5586;">岁</span>
                        </template>
                    </VueCountUp>
                </div>

            </div>
            <div class="age-item">
                <div class="age-label">平均司龄</div>
                <div class="age-value">
                    <VueCountUp :end-val="5.9" :decimal-places="1" :duration="2">
                        <template #suffix>
                            <span style="font-size: 14px;color:#2a5586;">年</span>
                        </template>
                    </VueCountUp>

                </div>

            </div>
            <div class="age-item">
                <div class="age-label">平均工龄</div>
                <div class="age-value">
                    <VueCountUp :end-val="12.65" :decimal-places="2" :duration="2">
                        <template #suffix>
                            <span style="font-size: 14px;color:#2a5586;">年</span>
                        </template>
                    </VueCountUp>
                </div>

            </div>
        </div>

        <div style="position: relative">
            <div class="bor-line">
            </div>
            <div ref="chartDom" class="chart-area"></div>

        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, shallowRef } from 'vue';
import * as echarts from 'echarts/core';
import type { EChartsOption } from 'echarts';
import variables from '../../variables.less?raw';
import VueCountUp from "vue-countup-v3";

function getLessVariable(varName: string): string {
    console.log('====================================');
    console.log(variables, 'variables');
    console.log('====================================');
    const match = variables.match(new RegExp(`@${varName}:\\s*([^;]+);`));
    return match ? match[1].trim() : '#ccc';
}

const chartDom = ref<HTMLElement | null>(null);
const myChart = shallowRef<echarts.ECharts | null>(null);


const ageCategories = ['25岁以下', '26-30岁', '31-35岁', '36-40岁', '41-45岁', '46-50岁', '50岁以上'];
const ageData = [20, 45, 65, 80, 50, 30, 15];

const axisLineColor = getLessVariable('axis-line-color');
const secondaryColor = getLessVariable('secondary-color');
const splitLineColor = getLessVariable('split-line-color');

const option: EChartsOption = {
    tooltip: {
        trigger: 'axis', axisPointer: { type: 'shadow' },
        backgroundColor: 'rgba(3, 28, 66, 0.9)', borderColor: axisLineColor, textStyle: { color: '#fff' },
        formatter: '{b}: {c}人'
    },
    grid: {
        left: '3%', right: '4%', bottom: '0%',
        top: '15%', containLabel: true
    },
    xAxis: {
        type: 'category', data: ageCategories,
        axisLabel: { show: true, color: "#ccc", fontSize: 10, interval: 0 },
        axisLine: { lineStyle: { color: "#ccc" } },
        axisTick: { alignWithLabel: true, lineStyle: { color: "#ccc" } }
    },
    yAxis: {
        type: 'value', axisLabel: { show: true, color: "#ccc" }, axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { show: true, lineStyle: { color: splitLineColor, type: 'dashed' } }
    },
    series: [{
        name: '人数', type: 'bar', barWidth: 15, data: ageData,
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#6ad3aa" },
                { offset: 1, color: secondaryColor }
            ]),
            borderRadius: [3, 3, 0, 0]
        }
    }]
};

const resizeChart = () => myChart.value?.resize();

onMounted(() => {
    if (chartDom.value) {
        myChart.value = echarts.init(chartDom.value);
        myChart.value.setOption(option);
        window.addEventListener('resize', resizeChart);
    }
});

onUnmounted(() => {
    window.removeEventListener('resize', resizeChart);
    myChart.value?.dispose();
});

</script>

<style lang="less" scoped>
@import '../../variables.less';

.age-structure-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.age-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    margin-top: 15px;
    flex-shrink: 0;
}

.age-item {
    padding: 5px 5px;
    box-sizing: border-box;
    width: 125px;
    background-size: 100% 100%;
    height: 70px;
    background-repeat: no-repeat;
    background-image: url("src/assets/r-age.png");
}

.age-value {
    font-size: 18px;
    font-weight: bold;
    color: @primary-color;
}

.age-label {
    font-size: 18px;
    color: white;
    white-space: nowrap;
}

.chart-area {
    width: 100%;
    flex-grow: 1;
    min-height: 220px;
}

.bor-line {
    border: 2px dashed #233460;
    height: 220px;
    width: 420px;
    position: absolute;
    background: rgba(45, 58, 103, .5);
}
</style>